<template>
	<view class="flex-col page">
		<view class="flex-col">
			<swiper class="swiper">
				<swiper-item>
					<view class="item1"></view>
				</swiper-item>
				<swiper-item>
					<view class="item2"></view>
				</swiper-item>
			</swiper>
		</view>
		<view class="flex-col section2">
			<text class="section2-title">{{model.标题}}</text>
			<text class="section2-intro">{{model.介绍}}</text>
			
			<view class="">
				<text class="section2-price-icon">￥</text>
				<text class="section2-price">{{model.价格}}</text>
			</view>
			<text>{{model.发起人}}</text>
			<text>接龙状态：正在进行</text>
		</view>	
		
		<view class="flex-col section3">
			
			<view class="section3-title">参与接龙的人</view>
			
			
			<view class="">
				<view v-for="(item,index) in jielongList" class="flex-row justify-between section3-row">
					<view class="flex-row">
						<view class="section3-row-order">
							{{index}}
						</view>
						<view class="section3-row-avatar">
							
						</view>
						<view class="section3-row-name">
							人员1
						</view>
						<view class="section3-row-time">
							1分钟前
						</view>
					</view>	

					<view class="section3-row-cou">
						×1
					</view>
				</view>
			</view>
		</view>	
		
		<view class="flex-row justify-center  bottom-bar" >
			<text v-if="canJoin" class="flex-row justify-center items-center bottom-bar-btn2 " @click="handleJoin()">参与接龙</text>
			<text v-else class="flex-row justify-center items-center bottom-bar-btn1 " @click="handleCancel()" >取消接龙</text>		
		</view>
	</view>
</template>

<script>
	const db = uniCloud.database();
	export default {
		
		data() {
			return {
				model:{},
				canJoin:true,
				jielongList:[{
					name:"小红"
				},{
					name:"小名"
				}]
			}
		},
		onLoad(options) {
			const userOpenId="12312312"
			this.initJieLong(options.id)
			this.initJoin(options.id,userOpenId)
		},
		methods: {
			initJieLong(id){
			   
			   db.collection('tb_jielong').doc(id).get({getOne:true}).then(res=>{
				   this.model = res.result.data
			   })
			},
			initJoin(jieLongId,userOpenId){
				db.collection('tb_join_jielong').where({
					jieLongId:jieLongId,
					userOpenId:userOpenId
				}).count().then(res=>{
					this.canJoin = res.result.total === 0 ? true : false
				})
			},
			handleJoin(){
			   const param ={
				   jieLongId:this.model._id,
				   userOpenId:"12312312"
			   }
			  uniCloud.importObject("tb_join_jielong").add(param).then(res=>{
				  this.canJoin = true
				  uni.showToast({
					 title:res.message
				  })
			  })
			},
			handleCancel(){
				const param ={
				   jieLongId:this.model._id,
				   userOpenId:"12312312"
				}
				uniCloud.importObject("tb_join_jielong").delete(param).then(res=>{
				  this.canJoin = false
				  uni.showToast({
					 title:res.message
				  })
				})
			}
		}
	}
</script>

<style>
  .page {
	padding-bottom: 60rpx;
	background-color: #e6e6e7;
	width: 100%;
	overflow-y: auto;
	overflow-x: hidden;
	height: 100vh;
  }
  .swiper{
	  width: 100%;
	  height: 600rpx;
  }
  .item1{
	  width: 100%;
	  height: 600rpx;
	  background-color: #ffaaff;
  }
  .item2{
	  width: 100%;
	  height: 600rpx;
	  background-color: #00ff00;
  }
  .section2{
    margin: 25rpx;
    padding: 20rpx;
    background-color: #ffffff;
    border-radius: 20rpx;
  
  }
  .section2-title{
	  font-size: 48rpx;
	  font-weight: bold;
  }
  .section2-intro{
	  color: #999999;
	   margin-bottom: 40rpx;
  }
  .section2-price-icon{
	  font-size: 36rpx;
	  color: #ffaa00;  
  }
  .section2-price{
	  font-size: 36rpx; 
	  color: #ffaa00;
      font-weight: bold;
  }
  .section3{
	  margin: 25rpx;
	  padding: 20rpx;
	  background-color: #ffffff;
	  border-radius: 20rpx;
  }
  .section3-title{
	  font-size: 28rpx;
	  color: #00a5f7;
	  margin-bottom: 20rpx;
  }
  .section3-row{
	  padding-top: 5rpx;
	  padding-bottom: 5rpx;
  }
  .section3-row-order{
	  width: 50rpx;
	  margin-right: 20rpx;
  }
  .section3-row-avatar{
	  background-color: #00a5f7;
	  border-radius: 50%;
	  width: 50rpx;
	  height: 50rpx;
	  margin-right: 20rpx;
  }
  .section3-row-name{
	  
  }
  .section3-row-time{
	  color: #acacac;
  }
  .section3-row-cou{
	  
  }
  .bottom-bar{
	  position: fixed;
	  width: 100%;
	  background-color: #ffffff;
	  height: 150rpx;
	  bottom: 0;
  }
  .bottom-bar-btn1{
	  background-color: #7eccff;
	  color: #FFFFFF;
	  width: 100%;
	  height: 80rpx;
	  margin-left: 30rpx;
	  margin-right: 30rpx;
	  margin-top: 20rpx;
	  border-radius: 15rpx;
  }
  .bottom-bar-btn2{
	  background-color: #00aaff;
	  color: #FFFFFF;
	  width: 100%;
	  height: 80rpx;
	  margin-left: 30rpx;
	  margin-right: 30rpx;
	  margin-top: 20rpx;
	  border-radius: 15rpx;
  }
</style>
